<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>统计柱状图</title>
		<script src="${pageContext.request.contextPath}/js/jquery.min.js?v=2.1.4"></script>
		<script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
		<style type="text/css">
			#bar{
				width: 1200px;
				height:600px;
				margin:20px auto 0;
			}
			#weeks,#years{
				display: inline-block;
				width:90px;
				height:34px;
				text-align: center;
				line-height: 34px;
				border-radius:5px;
			}
		</style>
		<script type="text/javascript">  
            function removeChilds(id){  
                var childs = document.getElementById(id).childNodes;//这一行代码和紧跟的下面的for循环用于清除原来日的下拉列表的select中的对节点  
                for(var i=childs.length-1;i>=0;i--) {  
                    document.getElementById(id).removeChild(childs[i]);        
                }  
            }  
            function setDay(){  
                var yearToDate=document.getElementById("year").value;  
                var monthToDate=document.getElementById("month").value;  
                //alert(yearToDate+":"+monthToDate);  
                var days=new Array(28,29,30,31);  
                var nowDate=new Date();  
                if(monthToDate==1||monthToDate==3||monthToDate==5||monthToDate==7||monthToDate==8||monthToDate==10||monthToDate==12){  
                    removeChilds("day");  
                    for( i=1; i<=days[3]; i++ ){  
                        if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//如果是当前系统时间则设置默认的日  
                            var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");  
                            var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);  
                            document.getElementById("day").appendChild(newOption);  
                        }else{  
                            var newOption = document.createElement("option");newOption.setAttribute("value",i);  
                            var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);  
                            document.getElementById("day").appendChild(newOption);  
                        }  
                    }  
                }  
                if(monthToDate==4||monthToDate==6||monthToDate==9||monthToDate==11){  
                    removeChilds("day");  
                    for( i=1; i<=days[2]; i++ ){  
                        if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//如果是当前系统时间则设置默认的日  
                            var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");  
                            var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);  
                            document.getElementById("day").appendChild(newOption);  
                        }else{  
                            var newOption = document.createElement("option");newOption.setAttribute("value",i);  
                            var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);  
                            document.getElementById("day").appendChild(newOption);  
                        }  
                    }  
                }  
                if(monthToDate==2){  
                    removeChilds("day");  
                    if(yearToDate%400==0||yearToDate%100!=0&&yearToDate%4==0){//闰年  
                        for( i=1; i<=days[1]; i++ ){  
                            if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//如果是当前系统时间则设置默认的日  
                                var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");  
                                var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);  
                                document.getElementById("day").appendChild(newOption);  
                            }else{  
                                var newOption = document.createElement("option");newOption.setAttribute("value",i);  
                                var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);  
                                document.getElementById("day").appendChild(newOption);  
                            }  
                        }  
                    }  
                    else{  
                        for( i=1; i<=days[0]; i++ ){  
                            if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//如果是当前系统时间则设置默认的日  
                                var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");  
                                var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);  
                                document.getElementById("day").appendChild(newOption);  
                            }else{  
                                var newOption = document.createElement("option");newOption.setAttribute("value",i);  
                                var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);  
                                document.getElementById("day").appendChild(newOption);  
                            }  
                        }  
                    }  
                }  
            }  
            function getMonth(){  
                var m;  
                for(m=1;m<=12;m++) {  
                    if((new Date().getMonth()+1)==m){  
                        document.write("<option value="+m+" selected=\"selected\">"+m+"</option>");  
                    }else{  
                        document.write("<option value="+m+">"+m+"</option>");  
                    }  
                }  
            }  
            function getYear(){  
                var y;  
                var date=new Date();  
                var fullYear=date.getFullYear();  
                for(y=2017;y<=fullYear;y++){  
                    if(y==fullYear){  
                        document.write("<option value="+y+" selected=\"selected\">"+y+"</option>");  
                    }else{  
                        document.write("<option value="+y+" >"+y+"</option>");  
                    }  
                }   
            } 

        </script> 
	</head>
<body>
	<div style="width:1200px; margin:20px auto 0;">
        <div style="overflow:hidden; margin-bottom:40px;"> 
            <div style="float:left;" class="select-check">
                <select style="height: 30px" name="year" id="year" onChange="setDay();"><script type="text/javascript">getYear();</script></select>年  
                <select style="height: 30px" name="month" id="month" onChange="setDay()"><script type="text/javascript">getMonth();</script></select>月  
                <select style="height: 30px" name="day" id="day"><script type="text/javascript">setDay();</script></select>日 
            </div>
            <div style="float:right;">
                <span style="margin-right:60px;">总金额:<span class="summoney" style="margin-left:20px; color:red;"></span></span>
                <span>总订单数:<span class="sumorder" style="margin-left:20px; color:red;"></span></span>
            </div>
        </div> 
        
        <div id="weeks" data-type="week" onclick="type('week')">周</div>
        <div id="years" data-type="year" onclick="type('year')">年</div>
    	<div id="bar">
    	</div>
    	<div id="echarts-sum" style="text-align: center; color:#61A0A8;">运营统计表</div>
    </div>
       <%-- <div id="divload" style="top:0;  position: absolute; width:100%; height:100%; z-index: 999">
        <img src="${pageContext.request.contextPath}/img/zhuanquan.png" alt="loading" / style="top:50%; left:50%; position: absolute; width:200px; height:200px; margin-top:-100px; margin-left:-100px; z-index: 999">
    </div>  --%>
	<script type="text/javascript">
		var myBar = echarts.init(document.getElementById('bar'));
		var weekXData = ['星期一','星期二','星期三','星期四','星期五','星期六','星期天'];
		var yearXData = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
		var weekupData = [];
		var weekdownData = [];
		var weekWinData = [];
		var yearupData = [];
		var yeardownData = [];
		var yearWinData = [];
		var isTime="";
		option = {
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'cross',
		            crossStyle: {
		                color: '#999'
		            }
		        }
		    },
		    toolbox: {
		        feature: {
		            dataView: {show: true, readOnly: false},
		            magicType: {show: true, type: ['line', 'bar']},
		            restore: {show: true},
		            saveAsImage: {show: true}
		        }
		    },
		    legend: {
		        data:['总订单','总金额','实名订单']
		    },
		    xAxis: [
		        {
		            type: 'category',
		            axisPointer: {
		                type: 'shadow'
		            }
		        }
		    ],
		    yAxis: [
		        {
		            type: 'value',
		            name: '运营统计表',
		            axisLabel: {
		                formatter: '{value}'
		            }
		        }
		    ],
		    series: [
		        {
		            name:'总订单',
		            type:'bar',
		            barWidth: 30
		        },
		        {
		            name:'总金额',
		            type:'bar'
		        },
		        		        {
		            name:'实名订单',
		            type:'bar'
		        }
		    ]
		};

		window.onload = function(){
			$("#years").css({"background":"#5BC0DE","color":"#fff"});
			$("#weeks").css({"background":"#fff","color":"#000"});
			var yearToDate = $("#year").val();
        	var monthToDate = $("#month").val();
        	var dayToDate = $("#day").val();
        	var dayinte = yearToDate + "-" + monthToDate + "-" + dayToDate;
			$.ajax({
			        url: '../statis/getStatisticsChart.htm',
			        type: 'post',
			        data: {'date': dayinte,'isTime': 1},
			        dataType:'json',
			        beforeSend:function(){var index = layer.load(1, { shade: [0.8,'#ddd']});},
					complete:function(){var index = layer.closeAll("loading");},
			        success: function (result) {
			        	
			        				var ordersum = 0;
			        				var moneytimeCarriage = 0;
					        		var data = result.data.list;
					        		for(var i=0; i<data.length; i++){
				                        yearupData.push(data[i].sum);  
				                        yeardownData.push(data[i].timeCarriage); 
				                        yearWinData.push(data[i].auth); 
				                        ordersum += data[i].sum;
				                        moneytimeCarriage += data[i].timeCarriage;
				        			}
				        	$(".summoney").text(moneytimeCarriage.toFixed(2));
				        	$(".sumorder").text(ordersum);
				        	option.xAxis[0].data = yearXData;
								option.series[0].data = yearupData;
								option.series[1].data = yeardownData;
								option.series[2].data = yearWinData;
								
								myBar.setOption(option);
				        }
				    })
			
		}
		// function getDates(s){
  //       	var newDate = new Date(s),
	 //        	dateWeek = newDate.getDay() || 7,
	 //        	dateTime = newDate.getTime(),
	 //        	x = 1000*60*60*24;

	 //        var start = "",end = "";
	 //        start = getDate(dateTime - (dateWeek - 1) * x, true)
	 //        end = getDate(dateTime + (7 - dateWeek) * x, true)
	 //        return {start: start, end: end}
  //       }
  //       function getDate(b, issTime) {
		// 	var a = issTime ? new Date(parseInt(b)) : b;
		// 	var y = a.getFullYear(),
		// 		m = a.getMonth() + 1,
		// 		d = a.getDate();
		// 	return y + '-' + (m >= 10 ? m : ('0' + m)) + '-' + (d >= 10 ? d : ('0' + d));
		// }
		function type(n) {
				var yearToDate=$("#year").val();
            	var monthToDate=$("#month").val();
            	var dayToDate=$("#day").val();
            	var dayinte=yearToDate+"-"+monthToDate+"-"+dayToDate;
			if (n == 'week') {
				$("#weeks").css({"background":"#5BC0DE","color":"#fff"});
				$("#years").css({"background":"#fff","color":"#000"});
				weekupData.splice(0,weekupData.length);
				weekdownData.splice(0,weekdownData.length);
				weekWinData.splice(0,weekWinData.length);
				isTime="2";
				$.ajax({
			        url: '../statis/getStatisticsChart.htm',
			        type: 'post',
			        cache: false,
			        data: {'date': dayinte,'isTime': isTime},
			        dataType:'json',
			        beforeSend:function(){var index = layer.load(1, { shade: [0.8,'#ddd']});},
		            complete:function(){var index = layer.closeAll("loading");},
			        success: function (result) {
					        		var data=result.data.list;
					        		for(var i=0;i<data.length;i++){
				                        weekupData.push(data[i].sum); 
				                        weekdownData.push(data[i].timeCarriage); 
				                        weekWinData.push(data[i].auth); 	
				        			} 
				        	option.xAxis[0].data = weekXData;
									option.series[0].data = weekupData; 
									option.series[1].data = weekdownData;
									option.series[2].data = weekWinData;
									option.series[0].barWidth = 30;
									option.series[1].barWidth = 30;
									option.series[2].barWidth = 30;
									myBar.clear();
					        		myBar.setOption(option,true);
				        }
				    })
			} else {
				$("#years").css({"background":"#5BC0DE","color":"#fff"});
				$("#weeks").css({"background":"#fff","color":"#000"});
				yearupData.splice(0,yearupData.length);
				yeardownData.splice(0,yeardownData.length);
				yearWinData.splice(0,yearWinData.length);
				isTime="1";
				$.ajax({
			        url: '../statis/getStatisticsChart.htm',
			        type: 'post',
			        cache: false,
			        data: {'date': dayinte,'isTime': isTime},
			        dataType:'json',
			        beforeSend:function(){var index = layer.load(1, { shade: [0.8,'#ddd']});},
		            complete:function(){var index = layer.closeAll("loading");},
		            
			        success: function (result) {
					        		var data=result.data.list;
					        		for(var i=0;i<data.length;i++){
			                        yearupData.push(data[i].sum); 
			                        yeardownData.push(data[i].timeCarriage); 
			                        yearWinData.push(data[i].auth);       
				        	} 
				        	option.xAxis[0].data = yearXData;
								option.series[0].data = yearupData;
								option.series[1].data = yeardownData;
								option.series[2].data = yearWinData;
								option.series[0].barWidth = 20;
								option.series[1].barWidth = 20;
								option.series[2].barWidth = 20;
								myBar.clear();
								myBar.setOption(option,true);
				        }
				    })
			    
			}
			  myBar.clear();  
			myBar.setOption(option,true);
		}
	</script>
	<script src="${pageContext.request.contextPath}/js/plugins/layer/layer.min.js"></script>
</body>
</html>